<template>
  <Dialog ref="dialog" width="800" title="域名信息">
    <el-button type="primary" class="height40" @click="onClickAddHost"
      >新增域名</el-button
    >
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%; margin: 20px 0" border>
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="domain" label="域名" />
      <el-table-column prop="env" label="环境">
        <template #default="scope">
          <div>{{ envDic[scope.row.env] }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" />
      <el-table-column label="操作">
        <template #default="scope">
          <div class="alitem">
            <div class="icon-button" @click="onClickEditCustomer(scope.row)">
              <el-icon size="16" style="cursor: pointer">
                <EditPen />
              </el-icon>
              <span>编辑</span>
            </div>

            <div class="icon-button" @click="onClickDeleteInfo(scope.row)">
              <el-icon size="16" style="cursor: pointer">
                <Delete />
              </el-icon>
              <span>删除</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </Dialog>

  <addHostDialog
    ref="addHostDialogRef"
    @getStroeDomain="getStroeDomainList"
  ></addHostDialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ElMessage } from 'element-plus';
import { getStroeDomain, storeDomainDel } from '@/api/appv2/appv2';
import { ref } from 'vue';
import addHostDialog from './addHostDialog.vue';

const envDic = {
  prod: '正式环境',
  test: '测试',
  develop: '开发',
};

const addHostDialogRef = ref(null);
const dialog = ref(null);
const tableData = ref([]);
// 机构信息
const customerInfo = ref(undefined);

// 获取机构域名列表
function getStroeDomainList() {
  getStroeDomain({
    id: customerInfo.value.id,
  }).then((res) => {
    tableData.value = res.data;
  });
}
// 新增域名
function onClickAddHost() {
  addHostDialogRef.value.openchange(customerInfo.value, 'true');
}
// 编辑域名
function onClickEditCustomer(val) {
  addHostDialogRef.value.openchange(val, 'false');
}
// 删除域名
function onClickDeleteInfo(val) {
  storeDomainDel({ id: val.id }).then(() => {
    ElMessage.success('删除成功');
    getStroeDomainList();
  });
}
// 打开弹窗
function openchange(val) {
  customerInfo.value = val;

  getStroeDomainList();
  dialog.value.openChange();
}
defineExpose({
  openchange,
});
</script>
<style lang="scss" scoped>
.form_item {
  margin-bottom: 20px !important;
}

.right {
  margin-left: 40px;
}

.alitem {
  .icon-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    /* 将光标设置为手型 */
    cursor: pointer;
  }
}
</style>
